<template>
	<NavBar :obj="{ title: title, color: '#000', backgroundColor: '#fff' }" />
	<up-sticky :offset-top="offsetTop">
		<view class="tabs">
			<up-tabs
				:list="condition"
				@click="conditionCah"
				:scrollable="false"
				:activeStyle="{
					color: '#303133',
					fontWeight: 'bold',
					transform: 'scale(1.05)'
				}"
				:lineColor="theme?.themeColor"
			></up-tabs>
		</view>
	</up-sticky>
	<view class="fill">
		<view class="show-load" v-if="showLoad" style="padding: 30upx">
			<up-loading-icon text="加载中" textSize="13"></up-loading-icon>
		</view>
		<view class="item" v-for="(item, index) in list" :key="index">
			<view class="info">
				<view class="total rmb-black">{{ item.merit }}</view>
				<view class="desc">总价值</view>
				<view class="flex items-center line">
					<view class="line-item">
						<text class="t">价格：</text>
						<text class="val rmb">{{ item.price }}</text>
					</view>
					<view class="line-item">
						<text class="t">数量：</text>
						<text class="val">{{ item.amount }}</text>
					</view>
				</view>
			</view>

			<view class="bottom flex items-center">
				<view class="box flex items-center justify-center" v-for="(item2, index2) in item.method" :key="index2">
					<image :src="imgUrl + item2.icon"></image>
					<text>{{ item2.title }}</text>
				</view>
			</view>

			<view class="btn theme-btn" v-if="listRef.type == 1" @click="sellBuy(item)">买入</view>
			<view class="btn theme-btn" v-else @click="sellBuy(item)">卖出</view>
		</view>
		<view class="empty" style="padding-bottom: 20%" v-if="!list.length && !showLoad">
			<up-empty icon="/static/product/ic_zerodata@2x.png" iconSize="392upx" marginTop="50%" text="暂无" />
		</view>

		<up-popup :show="showBuySell" :round="10" closeable="true" @close="showBuySell = false">
			<view class="pay-password">
				<view class="top flex flex-col items-center justify-between">
					<view class="title">{{ listRef.type == 1 ? '买入' : '卖出' }}</view>
				</view>

				<view class="inps">
					<InputAmount v-model="formRef.amount" customClass="inp" customPlaceClass="place-inp" placeholder="请填写交易数量" />
				</view>

				<view class="inps">
					<input v-model="formRef.pay_password" :password="true" class="inp" placeholder="输入支付密码" placeholder-class="place-inp" />
				</view>
			</view>

			<view class="tm-btn" @click="confirmSellBuy">
				<text>确认</text>
			</view>
		</up-popup>
	</view>
</template>

<script setup>
	import { ref, inject, reactive } from 'vue';
	import { port, goUrl, goIndex, hint, imgUrl, loading, closeLoading } from '/service/port';
	import { onLoad, onShow, onReachBottom } from '@dcloudio/uni-app';
	import InputAmount from '/components/InputAmount.vue';
	import { useThemeStore } from '@/stores/theme';
	const theme = useThemeStore();
	const showLoad = ref(false);
	const title = ref('');
	const offsetTop = ref(0);
	const list = ref([]);
	const listRef = ref({
		page: 1,
		type: 1
	});
	const formRef = ref({
		id: '',
		amount: '',
		pay_password: ''
	});
	const condition = reactive([
		{ name: '卖单', val: 1 },
		{ name: '买单', val: 2 }
	]);

	const showBuySell = ref(false);
	const sellBuy = (item) => {
		formRef.value.id = item.id;

		showBuySell.value = true;
	};

	function conditionCah(e) {
		list.value.length = 0;
		listRef.value.type = e.val;
		listRef.value.page = 1;

		getTradeOfflineHallList();
	}

	const confirmSellBuy = async () => {
		if (!formRef.value.amount) {
			hint('请填写交易数量');
			return false;
		}
		if (!formRef.value.pay_password) {
			hint('请输入支付密码');
			return false;
		}

		showBuySell.value = false;
		loading();
		let res = await port('addTradeOffline', formRef.value);
		setTimeout(() => {
			closeLoading();
			hint(res.msg);
			goIndex('/pages/tradeOffline/my-trade?type=' + listRef.value.type);
		}, 200);
	};

	async function getTradeOfflineHallList(bom = false) {
		!bom ? (showLoad.value = true) : '';
		let res = await port('getTradeOfflineHallList', listRef.value);
		showLoad.value = false;
		if (res.data.length) {
			list.value = [...list.value, ...res.data];
			listRef.value.page++;
		}
	}
	onLoad((e) => {
		title.value = e.title;
	});

	onShow(() => {
		// #ifdef MP-WEIXIN
		offsetTop.value = inject('minTop');
		// #endif
		getTradeOfflineHallList();
	});

	onReachBottom(() => {
		getTradeOfflineHallList(true);
	});
</script>

<style scoped lang="scss">
	::v-deep {
		page {
			background-color: #f4f5f8;
		}
	}
	.tabs {
		background-color: #fff;
	}
	.fill {
		margin: 0 30rpx;

		.item {
			background: #ffffff;
			border-radius: 20rpx;
			margin: 30rpx 0;
			padding: 30rpx;
			position: relative;
			.btn {
				position: absolute;
				top: 40rpx;
				right: 30rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #ffffff;
				padding: 8rpx 23rpx;
				border-radius: 12rpx;
				background: $theme-bg-btn-color;
			}
			.info {
				.total {
					font-weight: 500;
					font-size: 40rpx;
					color: #000000;
				}
				.desc {
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;
					margin-top: 10rpx;
				}
				.line {
					margin-top: 20rpx;
					.line-item {
						margin-right: 30rpx;
						&:last-child {
							margin-right: 0;
						}
						.t {
							font-weight: 400;
							font-size: 22rpx;
							color: #666666;
						}
						.val {
							font-weight: 400;
							font-size: 28rpx;
							color: $theme-color;
						}
					}
				}
			}
			.bottom {
				gap: 8rpx;
				margin-top: 25rpx;
				.box {
					background: #ffffff;
					border-radius: 18rpx;
					border: 1px solid #dbdbdb;
					padding: 5rpx 14rpx;
					> image {
						width: 24rpx;
						height: 24rpx;
						margin-right: 5rpx;
					}
					> text {
						font-weight: 400;
						font-size: 20rpx;
						color: #888888;
						margin-top: -3rpx;
					}
				}
			}
		}
	}

	.pay-password {
		padding: 30rpx;
		.top {
			padding-bottom: 50rpx;
			// border-bottom: 1rpx #eee solid;
			.title {
				font-weight: 500;
				font-size: 34rpx;
				color: #000000;
			}
			.desc {
				font-weight: 400;
				font-size: 24rpx;
				color: #777777;
				margin: 40rpx 0 14rpx 0;
			}
			.total {
				font-weight: 500;
				font-size: 58rpx;
				color: #000000;
			}
		}
		.middle {
			padding: 30rpx 0 44rpx 0;
			.pay_way {
				font-weight: 400;
				font-size: 26rpx;
				color: #666666;
			}
			.pay_way_value {
				font-weight: 400;
				font-size: 26rpx;
				color: #333333;
			}
		}
		.inps {
			margin-bottom: 30rpx;
			&:last-child {
				margin-bottom: 0;
			}
			.place-inp {
				font-weight: 400;
				font-size: 28rpx;
				color: #aaaaaa;
			}
			.inp {
				font-size: 28rpx;
				background: #f4f5f8;
				border-radius: 20rpx;
				padding: 25rpx;
			}
		}
	}
</style>
